<!--
 * @Author: YSM
 * @Description: 首页控制面板
 * @Date: 2024-04-07 14:14:16
 * @LastEditTime: 2024-10-14 17:08:47
 * @FilePath: \chongqing-analysis-visualization-platformd:\work\my_web_knowledge\my_vue2_demo\src\views\index\index.vue
-->
<template>
    <div class="main-panel">
        <el-row :gutter="10">
            <el-col :span="4">
                <div class="jump-button" @click="jumpMap">地图</div>
            </el-col>
            <el-col :span="4">
                <div class="jump-button" @click="jumpInput">输入框</div>
            </el-col>
            <el-col :span="4">
                <div class="jump-button">表单</div>
            </el-col>
            <el-col :span="4">
                <div class="jump-button">表格</div>
            </el-col>
            <el-col :span="4">
                <div class="jump-button" @click="jumpAnimation">动画</div>
            </el-col>
            <el-col :span="4">
                <div class="jump-button" @click="jumpCardAnimation">卡片悬停交互动画</div>
            </el-col>
            <el-col :span="4">
                <div class="jump-button" @click="jumpNewArr"> JS去重的方法</div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    data() {
        return {

        }
    }, methods: {
        //跳转地图
        jumpMap() {
            this.$router.push({ path: "/worktop" });
        },
        //跳转输入框
        jumpInput() { this.$router.push({ path: "/unit-input" }); },
        // 跳转动画
        jumpAnimation() {
            this.$router.push({ path: "/animation" });
        },
        jumpCardAnimation() {
            this.$router.push({ path: "/card-animation" });
        },
        jumpNewArr() {
            this.$router.push({ path: "/new-arr" });
        },

    }
};
</script>
<style lang='less' scoped>
.main-panel {
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    .el-row {
        margin: 0 !important;
    }

    .jump-button {
        width: 100%;
        height: 40px;
        border-radius: 8px;
        margin-top: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #ECF5FF;
        cursor: pointer;
    }

}
</style>